<template>
    <div id="contain">
        <el-table
            :data="tableList"
            style="width: 945px"
            stripe
            :row-style="rowStyle"
        >
            <el-table-column
                prop="name"
                label="线路名"
                width="180"
                align="center"
            >
            </el-table-column>

            <el-table-column
                prop="startAddr"
                label="起点"
                align="center"
            ></el-table-column>
            <el-table-column prop="endAddr" label="终点" align="center">
            </el-table-column>
            <el-table-column prop="adNum" label="成人数量" align="center">
            </el-table-column>
            <el-table-column prop="chNum" label="孩童数量" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center" width="180">
                <template slot-scope="scope">
                    <el-button size="mini" @click="chakan(scope.row)"
                        >查看</el-button
                    >
                    <el-button
                        size="mini"
                        type="primary"
                        @click="pingjia(scope.row)"
                        >去评价</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="服务名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="服务线路" :label-width="formLabelWidth">
                    <el-input v-model="form.route" disabled></el-input>
                </el-form-item>
                <el-form-item label="服务起点" :label-width="formLabelWidth">
                    <el-input v-model="form.startAddr" disabled></el-input>
                </el-form-item>
                <el-form-item label="服务终点" :label-width="formLabelWidth">
                    <el-input v-model="form.endAddr" disabled></el-input>
                </el-form-item>
                <el-form-item label="儿童数量" :label-width="formLabelWidth">
                    <el-input v-model="form.chNum" disabled></el-input>
                </el-form-item>
                <el-form-item label="成人数量" :label-width="formLabelWidth">
                    <el-input v-model="form.adNum" disabled></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                        style="float: right; margin: 0 15px"
                        @click="dialogFormVisible = false"
                        >确定</el-button
                    >
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="填写评价" :visible.sync="dialog">
            <el-form :model="form2">
                <el-form-item label="满意度" :label-width="formLabelWidth">
                    <el-radio-group v-model="form2.satisfaction">
                        <el-radio :label="0">不满意</el-radio>
                        <el-radio :label="1">一般</el-radio>
                        <el-radio :label="2">满意</el-radio>
                        <el-radio :label="3">非常满意</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item
                    label="具体评价内容"
                    :label-width="formLabelWidth"
                >
                    <el-input
                        type="textarea"
                        :rows="8"
                        v-model="form2.content"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog = false">取 消</el-button>
                <el-button type="primary" @click="submitpingjia"
                    >确 定</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            token: window.localStorage.getItem('token'),
            tableList: [],
            form: {},
            formLabelWidth: '120px',
            dialogFormVisible: false,
            dialog: false,
            form2: {},
            goodsId: 1,
            orderId: 1,
        };
    },
    mounted() {
        this.fn();
    },
    methods: {
        fn() {
            this.$axios({
                method: 'post',
                url: '/order/list/current',
                headers: { token: this.token },
                data: { type: 1 },
            }).then((res) => {
                if (res.data.code === 0) {
                    this.tableList = [];
                    let list = res.data.page;
                    list.forEach((item) => {
                        if (item.status === 3) {
                            item.status = '待评价';
                            this.tableList.push(item);
                        }
                    });
                }
            });
        },
        rowStyle() {
            return { height: '60px' };
        },
        chakan(k) {
            this.dialogFormVisible = true;
            this.form = k;
        },
        pingjia(k) {
            console.log(k);
            this.dialog = true;
            this.goodsId = k.goodsId;
            this.orderId = k.orderId;
        },
        submitpingjia() {
            this.dialog = false;
            this.$axios({
                method: 'post',
                url: '/review/add',
                headers: { token: this.token },
                data: {
                    orderId: this.orderId,
                    goodsId: this.goodsId,
                    satisfaction: this.form2.satisfaction,
                    content: this.form2.content,
                },
            }).then((res) => {
                console.log('评价提交是否成功');
                console.log(res);
                if (res.data.code === 0) {
                    // this.$message({
                    //   type: "success",
                    //   message: "提交评价成功！",
                    // });
                    // 还要修改状态
                    this.$axios({
                        method: 'post',
                        url: '/order/status',
                        headers: { token: this.token },
                        data: { orderId: this.orderId, status: 4 },
                    }).then((res) => {
                        console.log('修改状态是否成功');
                        console.log(res);
                        if (res.data.code === 0) {
                            this.$message({
                                type: 'success',
                                message: '确认订单完成！',
                            });
                            this.fn();
                        }
                    });
                }
            });
        },
    },
};
</script>
<style  scoped>
</style>>
